<template>
<div class="header clearfix">
<!-- 左边部分 -->
<div class="header-left fl">
   <router-link id="logo" to="/home" class="fl">{{logo}}</router-link>
   <ul class="left-nav clearfix">
     <li v-for="item in leftnav" :key="item">{{item}}</li>
   </ul>
</div>
<!-- 右边部分 -->
<div class="header-right fr">

   <router-link  to="/login" class="headerlink">{{$t('headerMsg.login')}}</router-link>
   <router-link  to="/register" class="headerlink">{{$t('headerMsg.register')}}</router-link>
   <el-select v-model="locale" slot="prepend" placeholder="请选择语言">
      <el-option label="简体中文" value="简体中文"></el-option>
      <el-option label="繁体中文" value="繁体中文"></el-option>
      <el-option label="English" value="English"></el-option>
    </el-select>
</div>

</div>
</template>

<script>
export default {
  data () {
    return {
      logo: '标题',
      leftnav: this.$t('headerMsg.leftnav'),
      rightnav: this.$t('headerMsg.rightnav'),
      locale: '简体中文'
    }
  },
  watch: {
    locale (val) {
      if (this.locale === '简体中文') {
        this.$i18n.locale = 'zh'
      } else if (this.locale === 'English') {
        this.$i18n.locale = 'en'
      } else {
        this.$i18n.locale = 'tw'
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.header {
  width: 100%;
  height: 60px;
  color: #fff;
  background: #000;
  line-height: 60px;
  padding: 0 50px;
  box-sizing: border-box;
  .header-left {
    height: 100%;
    width: 600px;
    ul {
      height: 60px;
      li {
        height: 60px;
        float: left;
        margin-left: 20px;
      }
    }
  }
  .header-right{
    width: 600px;
    .headerlink{
      width: 30px;
      padding: 10px 10px;
    }
  }
}
</style>
